<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>极光游戏（CLIPJOINT.COM）-全方位正版游戏服务平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <link rel="shortcut icon" href="${ bp }/static/image/favicon.ico"/>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background: #31374e;
        }

        body:after {
            content: '';
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            -o-filter: blur(3px);
            -ms-filter: blur(3px);
            filter: blur(3px);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        .layui-nav {
            width: 100%;
            height: 160px;
            background-color: #ffffff;
            position: relative
        }

        a:hover {
            cursor: pointer
        }

        .layui-website-logo {
            position: relative;
            height: 100px;
            top: 20px;
            left: 40px
        }

        .layui-login-btn {
            display: block;
            position: relative;
            width: 120px;
            height: 40px;
            background-color: #fb7299;
            color: #FFFFFF;
            text-align: center;
            line-height: 40px;
            left: 150px;
            top: 40px;
            border-radius: 40px
        }

        .layui-main-page {
            border-bottom: #ff6d3f 3px solid;
            line-height: 40px !important;
        }

        .layui-nav-list a {
            font-size: 16px;
            color: black !important;
        }

        .layui-information {
            padding-top: 20px;
            overflow: hidden
        }

        .layui-user-show {
            height: 350px;
            background-color: #ffffff1a;
            position: relative;
            left: 55px;
        }

        .layui-user-image {
            width: 160px;
            height: 160px;
            border-radius: 80px;
            position: relative;
            left: 60px;
            top: 20px;
            overflow: hidden
        }

        .layui-user-image img {
            height: 160px
        }

        .layui-little-info {
            display: block;
            text-align: center;
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 15px;
            position: relative;
            top: 40px;
            color: #FFFFFF
        }

        .layui-user-register {
            position: relative;
            height: 30px;
            border-radius: 30px;
            background-color: #FFA500;
            left: 40px;
            top: 70px;
            text-align: center;
            line-height: 30px
        }

        .layui-user-login {
            position: relative;
            height: 30px;
            border-radius: 30px;
            border: #FFA500 1px solid;
            left: 60px;
            top: 70px;
            text-align: center;
            line-height: 30px
        }

        .layui-user-logout {
            display: block;
            text-align: center;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            position: relative;
            top: 40px;
            color: #FFFFFF
        }

        .layui-user-logout:hover {
            cursor: pointer;
            color: orangered;
            text-decoration: underline #FF3028
        }

        .layui-user-account {
            margin: 10px;
            padding: 10px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.1);
            box-sizing: border-box;
            top: 40px;
            font-size: 20px;
            color: #FFFFFF
        }

        .layui-user-account p:nth-child(1) {
            margin-bottom: 10px;
            font-width: bold;
        }

        .layui-user-credit {
            margin: 10px;
            padding: 10px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.1);
            box-sizing: border-box;
            top: 40px;
            font-size: 20px;
            color: #FFFFFF
        }

        .layui-user-credit p:nth-child(1) {
            margin-bottom: 10px;
            font-width: bold;
        }

        .layui-user-mini {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            top: 36px;
            left: 80px
        }

        .layui-user-mini img {
            height: 40px;
            border-radius: 20px 20px 20px 20px
        }

        .layui-username {
            position: relative;
            color: #000000;
            top: 46px;
            left: 100px
        }

        #banner {
            width: 800px;
            height: 350px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        #items {
            width: 3200px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .item {
            width: 800px;
            height: 350px;
            font-size: 40px;
            font-weight: bolder;
            text-align: center;
            line-height: 350px;
            color: white;
            float: left;
        }

        #indexs {
            width: 800px;
            height: 40px;
            padding: 0 135px;
            position: absolute;
            bottom: 0;
            left: 470px;
        }

        .index {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 5px 10px;
            float: left;
            cursor: pointer;
            transition: all 300ms;
        }

        .index-active {
            background-color: #FFFFFF;
            border-radius: 20px;
            width: 40px;
            height: 20px;
            transform: translateY(6px);
            top: -5px;
            position: relative
        }

        .layui-Game {
            margin-top: 20px;
            padding-top: 20px;
            overflow: hidden
        }

        .layui-game-header {
            margin-bottom: 20px;
        }

        .layui-game-header .title {
            float: left;
            font-size: 18px;
            color: #fff;
        }

        .layui-game-header .more {
            float: right;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
        }

        .layui-game-header:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .layui-game-left {
            width: 590px;
            height: 456px;
            float: left;
            position: relative
        }

        .layui-game-left img {
            border-radius: 3px
        }

        .layui-game-left .theme-shadow {
            width: 590px;
            height: 456px;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 3px
        }

        .layui-game-left .theme-txt {
            position: absolute;
            left: 0;
            top: 80px;
            width: 100%
        }

        .theme-txt h1 {
            font-size: 26px;
            color: #fff;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            margin-bottom: 70px;
        }

        .theme-txt h2 {
            font-size: 60px;
            color: #FF6900;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            margin-bottom: 52px;
        }

        .btn a {
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
            outline: none;
            font-size: 14px;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.2);
            padding: 9px 22px;
            position: absolute;
            left: 250px
        }

        .layui-game-right {
            width: 500px;
            height: 456px;
            float: right;
        }

        .game-block-container {
            margin-bottom: 20px;
            width: 230px;
            height: 218px;
            margin-right: 20px;
            float: left;
            position: relative;
            cursor: pointer;
            border-radius: 3px;
            overflow: hidden;
        }

        .game-block-container:nth-child(2n) {
            margin-right: 0 !important;
        }

        .game-block-container img {
            width: 230px;
            height: 168px;
            display: block;
            opacity: 0.8;
        }

        .game-block-container .price-block {
            height: 50px;
            background: #282931;
            text-align: right;
            width: 100%;
            box-sizing: border-box;
            padding-right: 10px;
            position: relative;
        }

        .price-block .sale {
        }

        .price-block .discount {
            display: inline-block;
            background: #FF6900;
            color: #ffffff;
            padding: 4px;
            border-radius: 3px;
            font-size: 14px;
            margin-right: 2px;
            position: relative;
            top: -4px;
        }

        .price-block .list-wrap {
            display: inline-block;
            position: relative;
            top: 4px;
            text-align: left;
        }

        .list-wrap .list-price {
            font-size: 12px;
            color: #909090;
            text-decoration: line-through;
        }

        .list-wrap .price {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            font-weight: bold;
        }

        .game-block-container .game-name {
            position: absolute;
            left: 0;
            bottom: 50px;
            width: 100%;
            height: 32px;
            line-height: 32px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            background: rgba(0, 0, 0, 0.75);
        }

        .layui-game-right:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .layui-Game:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .layui-tab-card {
            border: 0;
            margin-top: 20px
        }

        .layui-tab-title {
            background-color: #31374e !important;
            color: #FFFFFF !important;
            border: 0
        }

        .layui-this {
            border-radius: 20px;
            border: 0;
        }

        .layui-plate-box {
            position: relative;
            overflow: hidden
        }

        .layui-plate-box .more {
            margin-top: 40px;
            float: right;
            color: rgba(255, 255, 255, 0.7)
        }

        .layui-plate-box .title {
            color: white;
            font-size: 18px;
            margin: 32px 0 20px 0;
            display: flex;
            justify-content: space-between;
            font-weight: normal
        }

        .layui-plate-content {
        }

        .layui-plate-content .publisher-list {
        }

        .publisher-list .publisher-block {
            float: left;
            height: 76px;
            width: 185px;
            text-align: center;
            border-radius: 3px;
            margin: 0 18px 20px 0;
            background: #383d50;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .publisher-block img {
            display: inline-block;
            max-width: 185px;
            max-height: 76px;
            border: 0
        }

        #game-show li {
            border-radius: 5px 5px 5px 5px;
            overflow: hidden;
            height: 100px;
            background: #282931;
            margin-bottom: 10px;
            border-radius: 5px 5px 5px 5px;
        }

        .listed-game-img {
            float: left;
            height: 100px;
            width: 168px;
        }

        .listed-game-price {
            float: right;
            margin-top: 40px;
        }

        .listed-game-content {
            margin: 0 150px 0 190px;
            padding: 15px 0;
        }

        .listed-game-content .title {
            font-size: 16px;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .listed-game-content .date {
            color: rgba(255, 255, 255, 0.5);
            margin-top: 8px;
        }

        .listed-game-content .tags {
            margin-top: 8px;
            color: #FFFFFF;
        }

        .listed-game-price .game-sale-price {
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            font-weight: bold;
            display: inline-block;
            margin-right: 15px;
        }
    </style>


</head>
<body>
<div class="layui-nav">
    <div class="layui-container">
        <div class="layui-col-md2 ">
            <img src="${ bp }/static/image/logo.jpg" class="layui-website-logo">
        </div>
        <div class="layui-col-md6 layui-title">
            <h1 style="color: #000000;font-size: 30px;position:relative;top: 40px;text-align: center">
                极光游戏-全方位正版游戏服务平台</h1>
        </div>
        <div class="layui-col-md4" style="height: 100px">
            <c:if test="${ onlineUser eq null }">
                <a href="${ bp }/user/login.jsp" class="layui-login-btn">登 录</a>
            </c:if>
            <c:if test="${ onlineUser ne null }">
                <div class="layui-col-md3 layui-user-mini">
                    <img src="${ bp }${ onlineUser.image }">
                </div>
                <div class="layui-col-md6 layui-username">
                    <a href="${ bp }/user/setting.jsp">${ onlineUser.username }</a>
                </div>
            </c:if>
        </div>
        <div class="layui-col-md12">
            <ul class="layui-nav-list">
                <li class="layui-nav-item layui-main-page"><a href="/">首页</a></li>
                <li class="layui-nav-item"><a href="${ bp }/list?method=list&pageNum=1&pageSize=7">游戏</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="layui-container layui-main-content">
    <div class="layui-information">
        <div class="layui-col-md9" id="banner">
            <div id="items">
            </div>
            <div id="indexs">
                <div class="index index-active"></div>
                <div class="index"></div>
                <div class="index"></div>
                <div class="index"></div>
            </div>
        </div>
        <div class="layui-col-md3 layui-user-show">
            <c:if test="${ onlineUser eq null }">
                <div class="layui-user-image">
                    <img src="${ bp }/static/image/default-image.png">
                </div>
                <p class="layui-little-info">立即注册享受最新优惠福利</p>
                <div class="layui-col-md4 layui-user-register">
                    <a href="${ bp }/user/register.jsp" style="color: #FFFFFF">注 册</a>
                </div>
                <div class="layui-col-md4 layui-user-login">
                    <a href="${ bp }/user/login.jsp" style="color: #FFA500">登 录</a>
                </div>
            </c:if>
            <c:if test="${ onlineUser ne null }">
                <div class="layui-user-image">
                    <img src="${ bp }${ onlineUser.image }">
                </div>
                <a href="${ bp }/user?method=logout" class="layui-user-logout">退出登录</a>
                <div class="layui-col-md5 layui-user-account">
                    <p>余额</p>
                    <p>${ onlineUser.account }</p>
                </div>
                <div class="layui-col-md5 layui-user-credit">
                    <p>积分</p>
                    <p>${ onlineUser.credit }</p>
                </div>
            </c:if>
        </div>
    </div>
    <div class="layui-Game">
        <div class="layui-game-header">
            <div class="title">【主题】精彩角色扮演</div>
            <a class="more" href="" title="角色扮演">+MORE</a>
        </div>
        <div class="layui-col-md12">
            <div class="layui-col-md5 layui-game-left">
                <img src="${ bp }/static/image/game/RPG-main.jpg">
                <div class="theme-shadow"></div>
                <div class="theme-txt">
                    <h1>角色扮演佳作</h1>
                    <h2>-85%起</h2>
                    <div class="btn">
                        <a target="_blank" href="" title="角色扮演">查看更多</a>
                    </div>
                </div>
            </div>
            <div class="layui-col-md5 layui-game-right" id="RPGGame">
                <c:forEach items="${RPGGameList}" var="v" varStatus="vs">
                    <a href="${bp}/list?method=detail&gameid=${v.id}">
                        <div class="game-block-container">
                            <img src="${bp}${v.image}">
                            <div class="price-block">
                                <div class="sale">
                                    <span class="discount">${v.off}</span>
                                    <div class="list-wrap">
                                        <p class="list-price">${v.preprice}</p>
                                        <p class="price">${v.price}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="game-name">${v.nickname}</div>
                        </div>
                    </a>
                </c:forEach>

        </div>
    </div>
</div>
<div class="layui-Game">
    <div class="layui-game-header">
        <div class="title">【推荐】Bandai Namco专区</div>
        <a class="more" href="" title="Bandai Namco Entertainment">+MORE</a>
    </div>
    <div class="layui-col-md12">
        <div class="layui-col-md5 layui-game-left">
            <img src="${ bp }/static/image/game/BandaiNamco-main.jpg">
            <div class="theme-shadow"></div>
            <div class="theme-txt">
                <h1>Bandai Namco促销游戏推荐</h1>
                <h2>-80%起</h2>
                <div class="btn">
                    <a target="_blank" href="" title="Bandai Namco Entertainment">查看更多</a>
                </div>
            </div>
        </div>
        <div class="layui-col-md5 layui-game-right" id="BanGAME">
            <c:forEach items="${BanGAMEList}" var="v" varStatus="vs">
                <a href="${bp}/list?method=detail&gameid=${v.id}">
                    <div class="game-block-container">
                        <img src="${bp}${v.image}">
                        <div class="price-block">
                            <div class="sale">
                                <span class="discount">${v.off}</span>
                                <div class="list-wrap">
                                    <p class="list-price">${v.preprice}</p>
                                    <p class="price">${v.price}</p>
                                </div>
                            </div>
                        </div>
                        <div class="game-name">${v.nickname}</div>
                    </div>
                </a>
            </c:forEach>
        </div>
    </div>
</div>

<div class="layui-tab layui-tab-card">
    <ul id="game-event" class="layui-tab-title" lay-filter="game-event">
        <li class="layui-this">最新上架</li>
        <li>促销榜</li>
    </ul>
    <div class="layui-tab-content" id="game-show" style="overflow: hidden">
        <div class="layui-tab-item layui-show">
            <c:forEach items="${newGame}" var="v" varStatus="vs">
                <ul class="showNew">
                    <li>
                        <a href="${ bp }/list?method=detail&gameid=${ v.id }">
                            <div>
                                <div class="listed-game-img">
                                    <img src="${ bp }${ v.image }">
                                </div>
                                <div class="listed-game-price">
                                    <span class="game-sale-price">${ v.price }</span>
                                </div>
                                <div class="listed-game-content">
                                    <p class="title">${ v.nickname }</p>
                                    <p class="date">${ v.time }</p>
                                    <p class="tags">${ v.type }</p>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </c:forEach>
        </div>
        <div class="layui-tab-item">
            <c:forEach items="${hotGame}" var="v" varStatus="vs">
                <ul class="hot">
                    <li>
                        <a href="${ bp }/list?method=detail&gameid=${ v.game_id }">
                            <div>
                                <div class="listed-game-img">
                                    <img src="${ bp }${ v.game_image }">
                                </div>
                                <div class="listed-game-price">
                                    <span class="game-sale-price">${ v.game_price }</span>
                                </div>
                                    <div class="listed-game-content">
                                    <p class="title">${ v.game_name }</p>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </c:forEach>
        </div>
    </div>
</div>
<div class="layui-plate-box">
    <a class="more" href="${ bp }/publisher/publisher.jsp">+MORE</a>
    <h1 class="title">发行商目录</h1>
    <div class="layui-plate-content">
        <div class="publisher-list">
        </div>
    </div>
</div>

</div>

<!-- 公共底部 -->
<%@ include file="/common/footer.jsp" %>

<script src="${ bp }/static/layui/layui.all.js"></script>
<script src="${ bp }/static/js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    layui.use(['form', 'table', 'layer', 'upload', 'laydate', 'jquery'], function () {
        let form = layui.form;
        let table = layui.table;
        let upload = layui.upload;
        let laydate = layui.laydate;
        let layer = layui.layer;
        let $ = layui.jquery;

    });


    //轮播图请求
    $.ajax({
        url: '${ bp }/event?method=showAll',
        type: 'post',
        data: {},
        dataType: 'json',
        async: false,
        success: (result) => {
            if (result.code === 0) {
                for (let i = 0; i < result.data.length; i++) {
                    let eventHtml = $('#items')
                    eventHtml.append('<div class="item"><a title="" href=""><img src=""></a></div>')
                    $('.item a').eq(i).attr("title", result.data[i].name)
                    $('.item img').eq(i).attr("src", ${ bp }result.data[i].image)
                }
            }
        },
        error: () => {
            console.log('请求接口错误');
        }
    });

    //选项卡
    $(function () {
        $("#game-event li ").click(function () {
            $("#game-event li").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this")
            $("#game-show div").eq($(this).index()).addClass("layui-show").siblings().removeClass("layui-show")
        })
    })

    $(function () {

        // 用于判断是否可以执行轮播函数
        let flag = true;
        // 获取轮播图数量
        let itemCount = $('.item').length;
        // 获取轮播图宽度
        let itemWidth = $('.item').width();
        // #items定位值
        let leftValue = -itemWidth;
        // 重新定位#items
        $('#items').css('left', leftValue + 'px');
        // 当前item的索引
        let index = 0;

        // 将item1克隆并追加到item4后面
        $('#items').append($('.item').eq(0).clone());
        // 将item4克隆并追加到item1前面
        $('#items').prepend($('.item').eq(3).clone());
        // 修改#items的宽度
        $('#items').width((itemCount + 2) * itemWidth);

        // 向左滚动函数
        let goLeft = function () {
            flag = false;
            leftValue -= itemWidth;
            index++;
            $('#items').animate({
                'left': leftValue + 'px'
            }, 500, function () {
                if (leftValue == -(itemCount + 1) * itemWidth) {
                    leftValue = -itemWidth;
                    index = 0;
                    $('#items').css('left', leftValue + 'px');
                }
                $('.index').removeClass('index-active');
                $('.index').eq(index).addClass('index-active');
                flag = true;
            });
        }

        // 向右滚动函数
        let goRight = function () {
            flag = false;
            leftValue += itemWidth;
            index--;
            $('#items').animate({
                'left': leftValue + 'px'
            }, 500, function () {
                if (leftValue == 0) {
                    leftValue = -itemCount * itemWidth;
                    index = itemCount - 1;
                    $('#items').css('left', leftValue + 'px');
                }
                $('.index').removeClass('index-active');
                $('.index').eq(index).addClass('index-active');
                flag = true;
            });
        }

        // 自动轮播
        setInterval(function () {
            if (flag) {
                goLeft();
            }
        }, 1000);

        // 点击索引切换图片
        $('.index').click(function () {
            index = $(this).index();
            $('.index').removeClass('index-active');
            $('.index').eq(index).addClass('index-active');
            leftValue = -(index + 1) * itemWidth;
            $('#items').animate({
                'left': leftValue + 'px'
            }, 500);
        })

    })

    //角色扮演游戏
    $.ajax({
        url: '${ bp }/game?method=RPGGame',
        type: 'post',
        data: {},
        dataType: 'json',
        async: false,
        success: (result) => {
        },
        error: () => {
            console.log('请求接口错误');
        }
    });


    //bandai(万代)游戏
    $.ajax({
        url: '${ bp }/BanGame?method=BanGame',
        type: 'post',
        data: {},
        dataType: 'json',
        async: false,
        success: (result) => {
        },
        error: () => {
            console.log('请求接口错误');
        }
    });

    //发行商目录请求
    $.ajax({
        url: '${ bp }/publisher?method=showAll',
        type: 'post',
        data: {},
        dataType: 'json',
        async: false,
        success: (result) => {
            if (result.code === 0) {
                for (let i = 0; i < 10; i++) {
                    let publisherHtml = $('.publisher-list')
                    publisherHtml.append('</a><div class="publisher-block"><a title="" href=""><img src=""></a></div>')
                    $('.publisher-block a').eq(i).attr("title", result.data[i].name)
                    $('.publisher-block img').eq(i).attr("src", ${ bp }result.data[i].logo)
                }
            }
        },
        error: () => {
            console.log('请求接口错误');
        }
    });

    //最新上架游戏目录请求
    $.ajax({
        url: '${ bp }/game?method=showNew',
        type: 'post',
        data: {},
        dataType: 'json',
        async: false,
        success: (result) => {
        },
        error: () => {
            console.log('请求接口错误');
        }
    });

    //热销游戏目录请求
    $.ajax({
        url: '${ bp }/game?method=hot',
        type: 'post',
        data: {},
        dataType: 'json',
        async: false,
        success: (result) => {
        },
        error: () => {
            console.log('请求接口错误');
        }
    });

</script>
</body>
</html>
